<html>
<head>
<script language="Javascript" src="../gamelib/gamelib_core.js"></script>
<script language="Javascript" src="../gamelib/gamelib_sprites.js"></script>
<script language="Javascript" src="../gamelib/gamelib_keyboard.js"></script>
<script language="Javascript">

var mysprite=new Array();	// I'm making a lot of sprites, so I'll put them in an array...
var redsprite=null;		// red sprite is going to act differently, so I'll refer to it by the name redsprite

Gl_preloader("../images/i0.gif");	// preload image to cache
Gl_preloader("../images/i1.gif");	// and another

function init(){
	Sp_linuxcompatible=true;
		// firstoff, I'll fill the array called mysprite with 20 sprites...

	for(n=0;n<20;n++) mysprite[n]=new Sp_Sprite()

		// assign the name redsprite to mysprite[0] for more readable code...

	redsprite=mysprite[0];

		// now set up all the sprites except redsprite...

	for(n=1;n<Sp_totalsprites;n++){				// set all sprites except mysprite[0] via a loop.
		mysprite[n].setXYdegs(Math.random()*360);	// give it a random direction.
		mysprite[n].setSpeed(Math.random()*5+3);	// give it a random speed.
		mysprite[n].bounces=true;			// I want it to bounce!
		mysprite[n].setImage("../images/i0.gif",20+Math.floor(n/2),20+Math.floor(n/2),1,1);			// give it an image.
		mysprite[n].setXlimits(0,500);			// limit its x movement.
		mysprite[n].setYlimits(0,300);			// limit its y movement.
		mysprite[n].moveTo(Math.random()*500,Math.random()*300);	// move it to a random position on screen
		mysprite[n].setFrame(0);			// sprite only has one frame...
		mysprite[n].switchOn();				// switch the sprite on!
	}

	redsprite.setXYdegs(0);				// set it to move in direction 0 degrees (12 o'clock)
	redsprite.setSpeed(8);				// set speed to 8
	redsprite.setXlimits(0,500);			// set its x limits
	redsprite.setYlimits(0,300);			// set its y limits (a sprite's gotta know it's limitations :)
	redsprite.moveTo(150,150);			// move it to position 150,150
	redsprite.collides=true;			// this sprite checks for collisions
	redsprite.setImage("../images/i1.gif",32,32,1,1);	// make it look different from rest!
	redsprite.setFrame(0);				// sprite only has one frame...
	redsprite.useHitEvents(true);
	redsprite.switchOn();				// switch it on!
	for(n=0;n<Sp_totalsprites;n++) redsprite.setHitEvent(mysprite[n],"redsprite.hit.switchOff()") // set up an event for each sprite to switch them off when hit!

	Sp_xoffset=100;					// all sprites relative to position
	Sp_yoffset=100;					// 100,100 on screen

	Gl_hook("counter()");				// hook in the function counter()
	Gl_start();					// and start the engine!
}


function counter(){
	window.status="Framecount="+Gl_ticker+" Sprites on screen="+Sp_spritesonscreen;	// just show frames and number os sprites in status bar.
	redsprite.setXYdegs(redsprite.xydegs+5);		// increase the angle sprite[0] travels in. The sprite engine automatically keeps angle within 0-359 degrees!
	if(Sp_spritesonscreen==1) Gl_stop(); 			// if no sprites left to hit, then stop!
}

</script>
</head>
<body bgcolor="#000000" onload="init()" style="overflow:hidden">
<font color="#ffbb00" face="Arial" size=3>
<u>Sprite library example 1</u><br><br>
<font size=2>
Collision detection.<br><br>
When the red sprite hits the blues, they disappear...
</font>
</font>
</body>
</html>